<!-- 反馈列表 -->   
<template>
  <div class="feed-back-box"   @touchstart="touchStart($event)" @touchend="touchEnd($event)">
    <div class="list-item" v-for="(item,index) in list" :key="index" @click="goFeedBackDetail(item.id)">
        <div class="list-header">
          <div class="user-info">
            <img :src="item.avatar" class="feed-img" />
            <div class=""> 
              <div>{{item.nick_name}} </div>  
              <div class="user-phone">{{item.phone}} </div>  
            </div>
          </div>
          <div class="add-time">
            {{item.create_time}}
          </div>
        </div>
        <div class="list-content">
          {{item.content}}
        </div>
        <div class="image-box" v-if="item.imgs">
          <img :src="item.imgs" alt=""  @click="preView(item.imgs,0)">
        </div>
    </div>
  </div> 
</template>

<script>
import api from '@/api/api.js'
export default {
  name: 'login',
  data () {
    return {
      pageNum: 1,
      pageSize: 10,
      list:[
         {
                "imgs": "https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/canteen/20211115/1636948186959-a8ae62a3-f9f6-4764.jpg",
                "STATUS": 0,
                "create_time": "2021-11-15 11:49:56",
                "phone": "18811462390",
                "nick_name": "Eiffel",
                "union_order_id": 16871,
                "avatar": "https://thirdwx.qlogo.cn/mmopen/vi_32/Jick6rDcxg4vMrD7w7s7np7Nql6bIiajxBo8YyicB8hibmOeibHiantt2QLoAlP5sHfcfiaEgzlD5mjqldBFHkVuLE9xw/132",
                "content": "没有鸭血吗？"
            },
            {
                "imgs": "",
                "STATUS": 0,
                "create_time": "2021-11-10 11:37:17",
                "phone": "18071814995",
                "nick_name": "L.A",
                "union_order_id": 16677,
                "avatar": "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epQFfelibsicXjBG05unvlVZ5eia1oJaQH3t6WvT7sfDIaBia5IcnEGI9icPqjwtWuD3sLTSu8Lp9KhLfA/132",
                "content": "需要打包，点错了"
            }
      ]
    }
  },
  mounted () { 
    this.getList();
  },
  methods: {
    preView(src,index){
      let urls = '';
      if(src.indexOf(",")<0){
        urls = src
      }else{
        urls = src.split(",")[index];
      }
      this.$imagePreview ({
        images: [urls],
        defaultOpt: {
          fullscreenEl: false,
          arrowEl: true,
          preloaderEl: true,
          bgOpacity: 0.85,
          showHideOpacity: true
        }

      })
    },
    getList(){
      api.shopkeeper.getFeedBackByStore({
        storeId: this.$route.query.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      },res=>{
        this.showFilter=false;
        this.list = params.pageNum==1? res.result.data : this.list.concat(res.result.data); 
        ++this.pageNum; 
        this.totalPage = res.result.totalPage;
      })
    },
    touchStart(e) {
        this.startY = e.targetTouches[0].pageY;
        this.startX = e.targetTouches[0].pageX;  
    },
    scrollToEnd(e) {
        let scrollHeight = this.$el.scrollHeight; 
        let clientHeight = this.$el.clientHeight; 
        let scrollTop = this.$el.scrollTop; 
        if (scrollTop + clientHeight >= scrollHeight-50 ) { //下拉到底了
          this.doLoadMore()  
        } 
    },
    touchEnd(e) {
      if (this.isLoading) {
          return;
      }
      let endX = e.changedTouches[0].pageX,
          endY = e.changedTouches[0].pageY,
          dy = this.startY - endY,
          dx = endX - this.startX;
      if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
      }
      if (endY < this.startY) {
          this.scrollToEnd(e)
      }
    },
    doLoadMore() { 
      if(this.pageNum < this.totalPage){
        ++this.pageNum;
        this.getList()
      }
      return
    
    },
    goFeedBackDetail(id){
        // this.$router.push({path:'/feedBackToggle',query:{id: ''}}); 
    }
  }
}
</script>
<style lang="less" scoped>
.feed-back-box{
  height: 100vh;
  background: #f5f5f5;
  padding: .24rem .30rem;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition-duration: 300ms;
}
.image-box img{
  width: 1.48rem;
  height: 1.48rem;
  border-radius: .12rem;
  margin-top: .20rem;
}
.user-info{
  display: flex;
}
.list-item{
    background: #fff;
    border-radius: .12rem;
    margin-bottom: .24rem;
    padding: .20rem;
    box-shadow: 0 3px 7px #ededed;
}
.list-header{
  display: flex;
  justify-content: space-between;
}
.feed-img{
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  margin-right: .12rem;

}
.add-time{
  color: #999;
  font-size: .22rem;
}
.user-phone{
  color: #666;
  font-size: .18rem;
}
.list-content{
  margin-top: .12rem;
  color: #666;
  letter-spacing: .02rem;

}
</style>
